<template>
  <div>
    <div class="M1" style="background: #ffffff">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="background: #ffffff"
      >
        <!--    导航-->
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <el-descriptions title="X光手部小关节分类数据集（基于骨龄计分法RUS-CHN)">
        <!--   实验信息 -->
        <el-descriptions-item label="简介">{{
          ProDescData.expAbs
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          ProDescData.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{
          ProDescData.expTime
        }}</el-descriptions-item>
        <el-descriptions-item label="分类">
          <el-tag size="small">{{ ProDescData.expType }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="标签">
          <el-tag size="small">{{ ProDescData.expArea }}</el-tag>
          <el-tag size="small">{{ ProDescData.expMethod }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-button type="primary" style="width: 100px" @click="showRunDialog">运行按钮</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-tabs type="border-card" class="border-card">
        <!-- 卡片标签  -->
        <el-tab-pane label="详情">
          <br />
          <div
            class="content-markdwon"
            v-html="compileMarkDown(content)"
            v-highlight
          ></div>
        </el-tab-pane>
        <el-tab-pane label="相关项目">
          <br />
          <div>内容--</div>
        </el-tab-pane>
        <el-tab-pane label="评论">
          <br />
          <div>内容---</div>
        </el-tab-pane>
        <el-tab-pane label="Fork记录">
          <br />
          <div>
            <el-table :data="forks" style="width: 100%">
              <el-table-column prop="nickname" label="用户名" width="180">
              </el-table-column>
              <el-table-column prop="forktime" label="时间" width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 运行python提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>即将进入Python运行界面是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="runPython"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import showdown from 'showdown'
import hljs from 'highlight.js'
import 'highlight.js/styles/default.css'
var converter = new showdown.Converter()
converter.setOption('tables', true)
export default {
  name: 'ProjectView',
  directives: {
    highlight: {
      update(el) {
        let blocks = el.querySelectorAll('pre code')
        blocks.forEach((block) => {
          hljs.highlightBlock(block)
        })
      },
    },
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      user: JSON.parse(window.sessionStorage.getItem('user')),
      userFace:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      nickname: '',
      ProDescData: {},
      md: '',
      ProjecId: null,
      content: '',
      forks: [], //表格中展示的数据
      dialogVisible:false,
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    initUser() {
      console.log('@', this.user)
      if (this.user) {
        this.userFace = this.user.userFace
        this.nickname = this.user.nickname
      }
    },
    getProjectDec() {
      let Project = this.$route.query.proId
      this.ProjecId = Project
      this.$axios(`/project/findById/${Project}`)
        .then((res) => {
          this.ProDescData = res.obj
        })
        .catch((error) => {})
      this.$axios(`/project/${Project}`)
        .then((res) => {
          this.content = res
        })
        .catch((error) => {})
    },
    compileMarkDown(val) {
      return converter.makeHtml(val)
    },
    initFork() {
      this.getRequest('/fork-project/' + this.ProjecId).then((resp) => {
        if (resp) {
          this.forks = resp
        }
      })
    },
    showRunDialog(){
      this.dialogVisible = true;
    },
    runPython(){
      this.getRequest(
        '/project/run/' + this.ProjecId + '/' + this.user.id
      ).then((resp) => {
        
          this.dialogVisible = false
          this.initFork()
        
      })
      this.initFork()
    }
  },
  created() {
    this.initUser()
    this.getProjectDec()
    this.initFork()
  },
}
</script>

<style>
.M1 {
  margin: 0 auto;
  width: 1200px;
}
.border-card {
  width: 100%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.JST {
  font-size: 20px;
}
.content-markdwon {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
  float: right;
}
</style>